<template>
<view>
	<u-navbar :is-back="false" title="交单记录详情"
	  title-size="30"
	  :background="{background:'#2B88FE' }"
	  title-color="#fff">
	  <div class="head_icon">
	    <u-icon @click="$api.handleBackTo"
	      name="arrow-left" color="#fff"
	      size="36">
	    </u-icon>
	    <u-icon @click="$api.handleHomeTo"
	      name="home" color="#fff" size="36">
	    </u-icon>
	  </div>
	</u-navbar>
	
  <div class="app-draw-add">
   
   <u-form label-width="200rpx" class="u-form">
     <u-form-item
       label="审核状态">
      <span
      :class="detail.StatusValue==1?'text-red':'text-blue'">{{detail.StatusValue==1?'待管理员审核':'已审核'}}</span>
     </u-form-item>
     <u-form-item
       label="提交人"> {{detail.UserName}}
     </u-form-item>
     <u-form-item
       label="提交时间">
       {{detail.DefTime}}
     </u-form-item>
     <u-form-item
       label="订单数量">
       {{detail.OrderCount}}
     </u-form-item>
     <u-form-item
       label="订单金额">
       {{detail.Money}}
     </u-form-item>
	 <u-form-item
	   label="已收款金额">
	   {{detail.PayMoney}}
	 </u-form-item>
	 <u-form-item
	   label="其中:现金">
	   {{detail.PayCash}}
	 </u-form-item>
	 <u-form-item
	   label="微信">
	   {{detail.PayWeiXin}}
	 </u-form-item>
	 <u-form-item
	   label="银行转账">
	   {{detail.PayBank}}
	 </u-form-item>
   </u-form>
       <view class="info borderBottom x-row">
		    <view class="x-col"> 
			<view class="itxt u-skeleton-fillet">
			  回交任务
			</view>
			<view class="slot-content">
			  <u-table>
			    <u-tr class="u-tr">
			      <u-th class="u-th" width="35%">商户名称</u-th>
			      <u-th class="u-th" width="20%">订单金额</u-th>
			      <u-th class="u-th" width="20%">已收金额</u-th>
			  
				    <u-th class="u-th" >验证</u-th>
			 
			    </u-tr>
			    <u-tr class="u-tr" v-for="(item,i) in detail.orderlist" :key="i">
			      <u-td class="u-td" width="35%" >
					  <span @click="$api.navigator(`/pages/sale/order_detail?id=${item.OrderId}&taskId=0&status=order`)">{{item.MrkName}}
					  </span><text class="iconfont icond-arrow-right"></text> </u-td>
			      <u-td class="u-td" width="20%">{{item.Money}}</u-td>
			      <u-td class="u-td"  width="20%">{{item.PayMoney}}</u-td>
			 
			    <u-td class="u-td">{{item.ReportStatus==1?'未验':'已验'}}</u-td>
			    </u-tr>
			  </u-table>
			</view>
		    </view>
	   </view>
   
 
	  
	  <view  class="interval u-skeleton-rect">
	    进货商品</view>
	  <view class="listgoods"
	    v-for="(g,index) in detail.prolist"
	    :key="index">
	    <view class="x-row">
	      <image
	        :src="`${img}images/product/${g.fProId}.jpg`"
	        class="goodsimg ">
	      </image>
	      <view class="x-col">
	  
	        <view   class="goodstitel ">
	          {{g.fProName}}
	        </view>
	        <view class="nuber">
	          散装：{{g.fUnit}}    整装：{{g.fPackUnit}}
	        </view>
			<view class="nuber">
			  初始：{{g.fIniCount}}({{g.fUnit}})      {{g.fPackIniCount}}({{g.fPackUnit}})    
			</view>
	        <view class="nuber">
	          订购：{{g.fOrderCount}}({{g.fUnit}})      {{g.fPackOrderCount}}({{g.fPackUnit}})    
	        </view>
	        <view class="nuber" >
	          领取：{{g.fGetCount}}({{g.fUnit}})      {{g.fPackGetCount}}({{g.fPackUnit}})    
	        </view>
			<view class="nuber">
			  送达：{{g.fSentCount}}({{g.fUnit}})      {{g.fPackSentCount}}({{g.fPackUnit}})    
			</view>
	      <view class="nuber">
	        归还：{{g.fBackCount}}({{g.fUnit}})      {{g.fPackBackCount}}({{g.fPackUnit}})    
	      </view>
	      <view class="nuber" >
	        库存：{{g.fLastCount}}({{g.fUnit}})      {{g.fPackLastCount}}({{g.fPackUnit}})    
	      </view>
	      </view>
	    </view>
	  </view>
	  

   
   </div>
   
   <div class="footer">
   
     <u-button   v-if="detail.StatusValue==1&&detail.iIsOffice==10" type="primary"  @click="handleSave">完成验证</u-button>
   </div>
   
   
   </view>	
</template>
 
<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
      isAllList: true,
	  id:0,
      page: 1,
      detail: [],
      list: [],
	  img: this.urlimg
    }
  },
 onLoad(e) {
   console.log(e)
   this.id = e.id
     this.getList()
 },
  methods: {
 
    getList() {
            this.$axios('api/CarReport/GetAllReportInfo', 'post', { value: this.id}).then(res => {
     		  this.detail=res.Value
        
            })
    },
	handleSave()
	 {
		 this.$api.modelMessage(`确认完成`, `确认已审核完成吗？`).then(() => {
		   let info = { id: this.id, status: 2 }
		   this.$axios('api/CarReport/ConfirmReportDetail', 'post', { value: info }).then(res => {
		 			if (!res.Success) {
		 			  uni.showToast({
		 			    title: '提交失败：'+res.Message,
		 			    icon: 'none',
		 			    duration: 2000
		 			  })
		 			  return false
		 			}
		 		   this.$api.handleToUrl(`状态已更新`,'ReportList')
		   })
		 })
	 }
  },
  onShow() {
  
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.app-draw-add {
  padding-bottom: 70rpx;
  .draw-item {
    .title {
      font-size: 30rpx;
      color: #7f7f7f;
      margin-top: 30rpx;
      margin-left: 30rpx;
    }
  }
  .draw-add {
    color: #007aff;
    font-size: 30rpx;
    padding: 32rpx;
    text-align: center;
  }
  .draw-mark {
    display: flex;
    padding: 0 32rpx;
    u-input {
      flex: 1;
    }
  }
  .footer {
    margin-top: 32rpx;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 2%;
    u-button,
    .u-btn {
      width: 40%;
    }
    u-button + u-button {
      margin-left: 30rpx;
    }
  }
}

.u-form {
  padding: 20rpx 40rpx;
}


.price {
  color: #eb3e00;
  font-size: 32upx;
}

.label {
  color: #2b88fe;
  border: 1px solid #2b88fe;
  padding: 3upx 10upx;
  border-radius: 30upx;
  font-size: 24upx;
  margin-left: 10upx;
}

.interval {
  color: #333;
  font-size: 32upx;
  line-height: 110upx;
  padding: 0 32upx;
}

.listgoods {
  padding: 32upx;
  border-bottom: 1px solid #f8f8f8;
}

.goodsimg {
  width: 144upx;
  height: 144upx;
  display: block;
  margin-right: 24upx;
}

.goodstitel {
  color: #000;
  font-size: 32upx;
}

.rights {
  color: #000;
  font-size: 333;
  font-size: 32upx;
}

.nuber {
  color: #666;
  font-size: 28upx;
  padding-top: 10upx;
}

.time {
  color: #666;
}

.prme {
  color: #000;
  font-size: 32upx;
  font-weight: bold;
}

.viewbbutton {
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  .x-row {
    display: flex;
    justify-content: center;
    ::v-deep button {
      margin: 0 20rpx;
    }
  }
}

.buttom {
  width: 95%;
  background: #007aff;
  border-radius: 16upx;
  text-align: center;
  line-height: 80upx;
  margin: auto;
  margin-top: 10upx;
  color: #fff;
  font-size: 32upx;
}
.leftbut {
  border: 1px solid #999;
  text-align: center;
  font-size: 32upx;
  color: #333;
  line-height: 80upx;
  border-radius: 16upx;
}
.right {
  border-color: #007aff;
  color: #fff;
  background: #007aff;
}
u-button + u-button {
  margin-left: 10rpx;
}

  .footer {
    margin-top: 32rpx;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 2%;
    u-button,
    .u-btn {
      width: 40%;
    }
    u-button + u-button {
      margin-left: 30rpx;
    }
  }
  
</style>